<!-- src/components/SolutionList.vue -->
<template>
  <div class="app-container">
    <!-- 添加导航栏 -->
    <div class="nav">
      <router-link to="/dashboard/dash" class="nav-link"><span>首页</span></router-link>
      <router-link :to="{ 
        name: 'project-manage', 
        params: { 
          param: staId,
          standardName: standardName 
        }
      }" class="nav-link">
        <span>/</span><span>{{ standardName }}</span>
      </router-link>
      <router-link :to="{
        name: 'project-manage',
        params: {
          param: staId,
          standardName: standardName,
          staName: standardName
        }
      }" class="nav-link">
        <span>/</span><span>{{ projectName }}</span>
      </router-link>
      <router-link :to="{
        name: 'moudle_select',
        params: {
          param: projectId,
          projectName: projectName,
          standardName: standardName,
          staId: staId
        }
      }" class="nav-link">
        <span>/</span><span>模块选择</span>
      </router-link>
      <router-link :to="{
        name: 'equip_manage',
        params: {
          param: projectId,
          projectName: projectName,
          standardName: standardName,
          staId: staId
        }
      }" class="nav-link">
        <span>/</span><span>设备管理</span>
      </router-link>
      <span>/</span><span class="current-page">设备方案</span>
      <div class="nav-back">
        <el-button type="text" @click="handleBack">
          <i class="el-icon-arrow-left"></i> 返回
        </el-button>
      </div>
    </div>
    <div class="container">
      <div class="header">
        <span>设备方案列表</span>
        <div class="buttons-outer">
          <el-button type="primary" @click="handleModify" :disabled="!selectedScheme">修改</el-button>
          <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedSchemes.length">批量删除</el-button>
          <el-button type="success" @click="handleAdd">添加</el-button>
        </div>
      </div>
      <el-table
        :data="schemes"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="soName"
          label="方案名称">
        </el-table-column>
        <el-table-column
        label="仪器照片">
        <template #default="scope">
          <el-image
            :src="scope.row.picture"
            :preview-src-list="scope.row.picture ? [getImageUrl(scope.row.picture)] : []"
            :initial-index="0"
            fit="cover"
            style="width: 100px; height: 100px; cursor: pointer">
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="factory"
        label="生产厂家">
      </el-table-column>
      <el-table-column
        prop="soUrl"
        label="详情">
        <template #default="scope">
          <el-button
            type="text"
            @click="handlePreviewPDF(scope.row.soUrl)"
            style="padding: 0; font-size: inherit; display: flex; align-items: center;">
            <FilePdf style="margin-right: 5px; font-size: 16px;" />
              点击预览{{scope.row.soName}}
          </el-button>
        </template>
      </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
      title="PDF预览"
      :visible.sync="pdfDialogVisible"
      width="80%"
      :before-close="handleClosePDF">
      <iframe
        v-if="currentPdfUrl"
        :src="currentPdfUrl"
        style="width: 100%; height: 80vh;"
        frameborder="0"
      ></iframe>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
//import { FilePdf } from '@element-plus/icons-vue'; // 确保安装了相应的图标库

export default {
  data() {
    return {
      loading: false,
      schemes: [],
      selectedSchemes: [],
      selectedScheme: null,
      projectId: null,
      staId: null,
      standardName: '',
      projectName: '',
      eid: null, // 修改为从路由参数获取
      baseUrl: 'http://localhost:8081', // 添加基础URL
      pdfDialogVisible: false,
      currentPdfUrl: '',
    };
  },
  async created() {
    const { id, param, projectName, standardName, staId } = this.$route.params;
    
    this.eid = id || localStorage.getItem('equipId');
    this.projectId = param || localStorage.getItem('projectId');
    this.projectName = projectName || localStorage.getItem('projectName') || '未知项目';
    this.standardName = standardName || localStorage.getItem('standardName') || '未知标准';
    this.staId = staId || localStorage.getItem('staId');
    
    // 存储当前值
    if (id) localStorage.setItem('equipId', id);
    if (param) localStorage.setItem('projectId', param);
    if (projectName) localStorage.setItem('projectName', projectName);
    if (standardName) localStorage.setItem('standardName', standardName);
    if (staId) localStorage.setItem('staId', staId);

    if (this.$route.params.id) {
    this.eid = this.$route.params.id;
    // 保存到 localStorage
    localStorage.setItem('currentEquipmentId', this.eid);
  } else {
    // 如果路由参数丢失，从 localStorage 获取
    this.eid = localStorage.getItem('currentEquipmentId');
    if (!this.eid) {
      console.error("未接收到 eid 参数");
      this.$message.error("设备ID获取失败");
      return;
    }
  }

    if (this.eid) {
      this.loadSchemes();
    }
  },
  methods: {

    getImageUrl(picture) {
      if (!picture) {
        return '';
      }
      try {
        // 使用require动态导入图片
        return require(`@/assets/soluimages/${picture}`);
      } catch (error) {
        console.error('11111111图片加载失败:', error);
        return ''; // 返回空字符串或默认图片路径
      }
    },

    handleSelectionChange(val) {
      this.selectedSchemes = val;
      this.selectedScheme = val.length === 1 ? val[0] : null;
    },
    async handleModify() {
      if (!this.selectedScheme) {
        this.$message.warning('请选择一个方案进行修改');
        return;
      }
      // 跳转到编辑页面
      let id = this.selectedScheme.soId;
      this.$router.push({ name: 'edit_equip', params: { id } });
    },
    async handleBatchDelete() {
      if (!this.selectedSchemes.length) {
        this.$message.warning('请选择要删除的方案');
        return;
      }
      try {
        await this.$confirm('确认删除选中的方案吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        let soids = this.selectedSchemes.map(item => item.soId);
        await axios.delete('/deleteSoluListOfEqu', { data: soids });
        this.$message.success('删除成功');
        await this.loadSchemes();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败');
        }
      }
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该方案吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        await axios.delete('/deleteSoluListOfEqu', { data: [row.soId] });
        this.$message.success('删除成功');
        await this.loadSchemes();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败');
        }
      }
    },
    handleAdd() {
      // 跳转到添加页面时传递所有必要参数
      this.$router.push({
        name: 'add_equip',
        params: {
          //equipId: this.eid,
          param: this.projectId,
          projectName: this.projectName,
          standardName: this.standardName,
          staId: this.staId,
          eid:this.eid,
          flag:1//1表示添加
        }
      });
    },
    handleEdit(row) {
      // 编辑时也传递所有必要参数
      this.$router.push({
        name: 'add_equip',
        params: {
          id: row.soId,
          flag:2,//2表示编辑
          equipId: this.eid,
          param: this.projectId,
          projectName: this.projectName,
          standardName: this.standardName,
          staId: this.staId
        }
      });
    },
    handlePreviewPDF(pdfUrl) {
      this.currentPdfUrl = pdfUrl;
      this.pdfDialogVisible = true;
    },

    handleClosePDF() {
      this.pdfDialogVisible = false;
      this.currentPdfUrl = '';
    },
    
    async loadSchemes() {
      try {
        const response = await axios.get('/getAllSolutionsOfEqu', { params: { eid: this.eid } });
        this.schemes = response.data;
      } catch (error) {
        console.error('加载方案列表失败', error);
        this.$message.error('加载方案列表失败');
      } finally {
        this.loading = false;
      }
    },
    handleBack() {
      this.$router.push({
        name: 'equip_manage',
        params: {
          param: this.projectId,
          projectName: this.projectName,
          standardName: this.standardName,
          staId: this.staId
        },
        replace: true
      });
    }
  },
  activated() {
    this.loadSchemes();
  },

  // 添加 mounted 钩子，在组件首次加载时调用
  mounted() {
    this.loadSchemes();
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.buttons-outer > .el-button {
  margin-left: 10px;
}
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  background-color: #f0f0f0;
}
.uploaded-image {
  width: 100px;
  height: 100px;
}
.upload-icon {
  font-size: 28px;
  color: #bfbfbf;
}
.nav {
  padding: 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: #909399;  /* 非当前页面使用灰色 */
  font-size: 16px;
  transition: color 0.3s;  /* 添加颜色过渡效果 */
}

.nav-link:hover {
  color: #409EFF;  /* 鼠标悬停时变为蓝色 */
}

.nav span {
  color: #909399;  /* 分隔符使用灰色 */
  font-size: 16px;
  margin: 0 5px;
}

.current-page {
  color: #409EFF !important;  /* 当前页面使用蓝色 */
  font-weight: 500;  /* 当前页面加粗 */
}

.nav-back {
  position: absolute;
  right: 20px;
}

.nav-back .el-button {
  font-size: 14px;
  color: #909399;  /* 返回按钮使用灰色 */
}

.nav-back .el-button:hover {
  color: #409EFF;  /* 鼠标悬停时变为蓝色 */
}

.nav-back i {
  margin-right: 5px;
}
</style>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.header span {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.buttons-outer {
  display: flex;
  gap: 10px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  color: #f78989;
}

:deep(.el-table) {
  margin-top: 20px;
}
</style>
